<template>
    <div>
        <!-- 标题 -->
      <myhead title='首页'></myhead>
      <!-- 导航 -->
      <van-tabs v-model="active" @click="getId">
        <van-tab :title="item.title"  v-for="item in type" :key="item._id">
            <div class="flex">
                <span>节点</span>
                <span @click="sortPrice">价格 <van-icon name="arrow-up" :class="reds === 0 ? 'red':''" />
                            <van-icon name="arrow-down"  :class="reds === 1 ? 'red':''"/>
                </span>
                <span>数据</span>
            </div>
            <ul>
                <li v-for="(itemm,i) in list" :key="i" @click="geDetails(itemm)">
                    <img :src="itemm.pic" alt="">
                    <p>{{itemm.title}}</p>
                    <p class="p2">￥{{itemm.price}}</p>
                </li>
            </ul>
        </van-tab>
      </van-tabs>
    </div>
</template>

<script>
import myhead from '@/components/myhead'
import {getNav,getlist} from '../utils/api/index'
export default {
    name: 'Home',
    data() {
        return {  
            active: 0,
            type:[],
            list:[],
            reds:2,
            listCopy:[]
        };
    },
    created() {
        getNav().then(res => {
            this.type = res.data.result
            getlist(this.type[0]._id).then(res => {
            this.list = res
            this.listCopy = JSON.stringify(res)
        }) 
        })
        
    },
    methods: {
        // 点击排序
        sortPrice() {
            console.log(4);
            
            if(this.reds === 1){
                this.reds = 2
                this.list.sort((item1,item2) => {
                    return item2.price - item1.price
                })
            }else if(this.reds === 0){
                this.reds = 1
                this.list.sort((item1,item2) => {
                    return item1.price - item2.price
                })
            }else {
                this.reds = 0
                this.list = JSON.parse(this.listCopy)
            }
        },
        // 获取点击的id
        getId(i){
             getlist(this.type[i]._id).then(res => {
            this.list = res
            this.listCopy = JSON.stringify(res)

        })
        },

        geDetails(obj) {
            this.$router.push({
                path:'/mydetails',
                query:{
                    obj:obj
                }
            })
            
        }

    },
    //组件挂载
    components: {
        myhead
    },
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
ul{
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
    height: calc(100vh - 120px);
    li{
        width: 49%;
        border: 1px #ccc solid;
        text-align: center;
        height: 340px;
        float: left;
        img{
            width: 100%;
            height: 200px;
        }
        .p2{
            color: red;
        }
    }
}
.flex{
    display: flex;
    justify-content: space-around;
}
.red{
    color:red;
}
</style>
